
<template>
  <div class="history-page">
    <!-- 背景图片轮换层 -->
    <div
        v-for="(bg, index) in backgrounds"
        :key="index"
        :class="['bg-image', { active: currentBg === index }]"
        :style="{ backgroundImage: `url(${bg})` }"
    ></div>

    <!-- 内容层 -->
    <div class="history-container">
      <h1>非遗历史</h1>
      <div class="text-grid">
        <div
            v-for="(text, index) in texts"
            :key="index"
            class="text-box"
            :style="getBoxStyle(index)"
            @click="showDetail(index)"
        >
          {{ text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'History',
  data() {
    return {
      currentBg: 0,
      backgrounds: [
        new URL('@/assets/non-photo-1.jpg', import.meta.url).href,
        new URL('@/assets/non-photo-2.jpg', import.meta.url).href,
        new URL('@/assets/non-photo-3.jpg', import.meta.url).href,
        new URL('@/assets/non-photo-4.jpg', import.meta.url).href,
        new URL('@/assets/non-photo-5.jpg', import.meta.url).href,
        new URL('@/assets/non-photo-6.jpg', import.meta.url).href,
      ],
      texts: [
        "文明的指纹：在时光褶皱里触摸非遗的体温",
        "当莫高窟的飞天拂去千年尘沙，当苏州绣娘的银针穿透岁月经纬...",
        "在商周青铜的饕餮纹里，我们触摸到祭祀乐舞的余温...",
        "唐宋的市井长巷里，非遗的烟火气在勾栏瓦舍间流转...",
        "明清的粉墙黛瓦间，非遗在匠人指间绽放出新的光华...",
        "当代的玻璃幕墙折射着非遗的现代性嬗变...",
        "龙泉青瓷的冰裂纹登上巴黎时装周...",
        "苗族银饰的图腾在工业设计中获得新生...",
        "二十四节气化身数字艺术展的主角...",
        "站在人类世的十字路口回望，非遗恰似一株会行走的银杏树..."
      ]
    };
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    this.stopAnimation();
  },
  methods: {
    showDetail(index) {
      this.activeText = this.texts[index]
      this.showDialog = true
    },
    // getBoxStyle(index) {
    //   // 生成10%-80%范围内的随机定位
    //   const getRandomPosition = () => Math.random() * 60 + 10 // 70%范围 + 10%偏移
    //
    //   return {
    //     top: `${getRandomPosition()}%`,
    //     left: `${getRandomPosition()}%`,
    //     animationDelay: `${index * 0.2}s`
    //   }
    // },
    getBoxStyle(index) {
      // 每 5 个文本框为一组循环
      const groupIndex = index % 5;
      // 每组文本框的延迟时间
      const delay = groupIndex * 0.5; // 每个文本框延迟 0.5 秒

      return {
        top: `${Math.random() * 60 + 10}%`, // 10%-70% 范围内的随机位置
        left: `${Math.random() * 60 + 10}%`, // 10%-70% 范围内的随机位置
        animationDelay: `${delay}s`, // 依次出现的延迟
        animationDuration: '1s', // 动画持续时间
        animationFillMode: 'forwards' // 动画结束后保持最终状态
      };
    },
    startAnimation() {
      this.interval = setInterval(() => {
        this.currentBg = (this.currentBg + 1) % this.backgrounds.length;
      }, 4000);
    },
    stopAnimation() {
      clearInterval(this.interval);
    }
  }
};
</script>

<style scoped>
.history-page {
  position: relative;
  height: 100vh;
  overflow: auto;
}

/* 背景图片样式 */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 0;
}

.bg-image.active {
  opacity: 1;
}

/* 文字内容容器 */
.history-container {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  max-width: 800px;
  max-height: calc(100vh - 40px); /* 确保内容不超出页面高度 */
  margin: 20px auto; /* 水平居中，上下保留 20px 间距 */
  background: rgba(82, 76, 76, 0.45);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 1.8rem;
  color: #ffffff; /* 深褐色 */
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}


p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4e342e; /* 深咖啡色 */
  margin-bottom: 1.8rem;
  padding: 15px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}
/* 新增文字网格样式 */
.text-grid {
  position: relative;
  height: 70vh;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-box {
  position: absolute;
  width: 280px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  line-height: 1.6;
  color: #3e2723;
  cursor: pointer;
  transition: transform 0.3s ease;
  animation: fadeIn 1s ease-in-out forwards; /* 使用 fadeIn 动画 */
}

/*.text-box {*/
/*  position: absolute;*/
/*  width: 280px;*/
/*  padding: 20px;*/
/*  background: rgba(255, 255, 255, 0.95);*/
/*  border-radius: 8px;*/
/*  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
/*  backdrop-filter: blur(3px);*/
/*  line-height: 1.6;*/
/*  color: #3e2723;*/
/*  cursor: pointer;*/
/*  transition: transform 0.3s ease;*/
/*  animation: float 6s ease-in-out infinite;*/
/*}*/
.text-box::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background: #fff;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.text-box:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 调整原容器样式 */
.history-container {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .text-box {
    width: 90%;
    left: 5% !important;
    top: auto !important;
    margin-bottom: 20px;
    position: relative;
    animation: none;
  }

  .text-grid {
    height: auto;
    display: flex;
    flex-direction: column;
  }
}
</style>